<template>
  <div>
    <Modal v-model="isShow" title="收文" ok-text="收文">
      <Form :model="formItem" :rules="formItem" ref="ruleFormRef">
        <Row class="addStyle">
          <Col span="12" style="display: flex">
            <div class="nameStyle">文件属性:</div>
            <Form-item prop="docAttributes">
              <!-- <div class="contentStyle"> -->
              <Select
                v-model="formItem.docAttributes"
                placeholder="请选择"
                @on-change="docAttributesChange"
              >
                <Option
                  v-for="(item, index) in docAttributesList"
                  :value="item.docAttributes"
                  :key="index"
                  >{{ item.docAttributes }}</Option
                >
              </Select>
              <!-- </div> -->
            </Form-item>
          </Col>
          <Col span="12" style="display: flex">
            <div class="nameStyle">来文单位:</div>
            <Form-item prop="sourceDocUnitName">
              <div class="contentStyle">
                <Input
                  v-model="formItem.sourceDocUnitName"
                  placeholder="请输入"
                ></Input>
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="12" style="display: flex">
            <div class="nameStyle">收文日期:</div>
            <Form-item prop="receiveDate">
              <div class="contentStyle">
                <Date-picker
                  v-model="formItem.receiveDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 150px"
                ></Date-picker>
              </div>
            </Form-item>
          </Col>
          <Col span="12" style="display: flex">
            <div class="nameStyle">收文号:</div>
            <Form-item prop="docAttributesNum">
              <div class="contentStyle">
                <Input
                  type="text"
                  v-model="formItem.docAttributesNum"
                  disabled
                />
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="12" style="display: flex">
            <div class="nameStyle">文件标题:</div>
            <Form-item prop="docTitle">
              <div class="contentStyle">
                <Input type="text" v-model="formItem.docTitle" />
              </div>
            </Form-item>
          </Col>
          <Col span="12" style="display: flex">
            <div class="nameStyle">来文号:</div>
            <Form-item prop="sourceDocNo">
              <div class="contentStyle">
                <Input type="text" v-model="formItem.sourceDocNo" />
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="12" style="display: flex">
            <div class="nameStyle">主办单位:</div>
            <Form-item prop="unitName">
              <div class="contentStyle">
                <Select v-model="formItem.hostUnitName" placeholder="请选择">
                  <Option
                    v-for="(item, index) in hostUnitNameList"
                    :value="item.unitName"
                    :key="index"
                    >{{ item.unitName }}</Option
                  >
                </Select>
              </div>
            </Form-item>
          </Col>
          <Col span="12" style="display: flex">
            <div class="nameStyle">保存期限:</div>
            <Form-item prop="retentionTime">
              <div class="contentStyle">
                <Date-picker
                  v-model="formItem.retentionTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 150px"
                ></Date-picker>
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="12" style="display: flex">
            <div class="nameStyle">份数:</div>
            <Form-item prop="docTotal">
              <div class="contentStyle">
                <Input type="text" v-model="formItem.docTotal" />
              </div>
            </Form-item>
          </Col>
          <Col span="12" style="display: flex">
            <div class="nameStyle">密级:</div>
            <Form-item prop="secretName">
              <div class="contentStyle">
                <Select v-model="formItem.secretName" placeholder="请选择">
                  <Option
                    v-for="(item, index) in secretNameList"
                    :value="item.secretName"
                    :key="index"
                    >{{ item.secretName }}</Option
                  >
                </Select>
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="24" style="display: flex">
            <div class="nameStyle">拟办意见:</div>
            <Form-item prop="opinion">
              <div class="contentStyle">
                <Input
                  v-model="formItem.opinion"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入..."
                ></Input>
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="24" style="display: flex">
            <div class="nameStyle">收文内容:</div>
            <Form-item prop="docContent">
              <div class="contentStyle">
                <Input
                  v-model="formItem.docContent"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入..."
                ></Input>
              </div>
            </Form-item>
          </Col>
        </Row>
        <Row class="addStyle">
          <Col span="24" style="display: flex">
            <div class="nameStyle">备注:</div>
            <Form-item prop="docRemark">
              <div class="contentStyle">
                <Input
                  v-model="formItem.docRemark"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入..."
                ></Input>
              </div>
            </Form-item>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel">取消</Button>
        <Button type="primary" size="large" @click="define">收文</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getDocAttributes,
  getDocAttributesNumber,
  getHostUnitName,
  getSecretName
} from '@/api/data'
export default {
  name: 'addModal',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      docAttributesList: [],
      hostUnitNameList: [],
      secretNameList: [],
      formItem: {
        docAttributes: '',
        sourceDocUnitName: '',
        receiveDate: '',
        docAttributesNum: '',
        docTitle: '',
        sourceDocNo: '',
        hostUnitName: '',
        retentionTime: '',
        secretName: '',
        opinion: '',
        docContent: '',
        docRemark: ''
      },
      ruleValidate: {
        docAttributes: [
          { required: true, message: '文件属性不能为空', trigger: 'blur' }
        ],
        sourceDocUnitName: [
          { required: true, message: '来文单位不能为空', trigger: 'blur' }
        ],
        receiveDate: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        docAttributesNum: [
          { required: true, message: '收文号不能为空', trigger: 'blur' }
        ],
        docTitle: [
          {
            required: true,
            message: '文件标题不能为空',
            trigger: 'blur'
          }
        ],
        sourceDocNo: [
          {
            required: true,
            message: '来文号不能为空',
            trigger: 'blur'
          }
        ],
        unitName: [
          {
            required: true,
            message: '主办单位不能为空',
            trigger: 'blur'
          }
        ],
        retentionTime: [
          {
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        docTotal: [
          {
            message: '份数不能为空',
            trigger: 'blur'
          }
        ],
        secretName: [
          {
            message: '密级不能为空',
            trigger: 'blur'
          }
        ],
        opinion: [
          {
            message: '介绍不能少于20字',
            trigger: 'blur'
          }
        ],
        docContent: [
          {
            message: '介绍不能少于20字',
            trigger: 'blur'
          }
        ],
        docRemark: [
          {
            type: 'string',
            message: '介绍不能多于100字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.getDocAttributes()
    this.getHostUnitName()
    this.getSecretName()
    console.log(this.show, 'this.show')
  },
  methods: {
    // 密级
    getSecretName() {
      getSecretName().then((res) => {
        this.secretNameList = res.data.data
        console.log(res.data.data, 'ppp')
      })
    },
    // 主办单位
    getHostUnitName() {
      getHostUnitName().then((res) => {
        this.hostUnitNameList = res.data.data
      })
    },
    //  获取收文属性
    getDocAttributes() {
      getDocAttributes().then((res) => {
        this.docAttributesList = res.data.data
      })
    },
    getDocAttributesNumber(val) {
      getDocAttributesNumber(val).then((res) => {
        this.formItem.docAttributesNum = res.data.data
      })
    },
    docAttributesChange(val) {
      this.getDocAttributesNumber(val)
    },
    define() {
      // this.$refs.formItem.validate((valid) => {
      //   if (valid) {
      console.log('nidhgeghj')
      this.$emit('trueModal', this.formItem)
      //   } else {
      //   }
      // })
    },
    cancel() {
      // this.$refs.ruleFormRef.clearValidate()
      this.$emit('noModal')
    }
  }
}
</script>

<style scoped>
.addStyle {
  margin-top: 10px;
}
.nameStyle {
  width: 55px;
  height: 30px;
  line-height: 35px;
  text-align: right;
}
.contentStyle {
  margin-left: 10px;
}
.ivu-select {
  width: 150px;
}
.ivu-input {
  width: 150px;
}
textarea.ivu-input {
  width: 400px;
}
</style>
